<template>
	<view class="alldiv">
		<view class="navBox">
			<u-icon color="#fff" name="arrow-left" size="19" @click="backList"></u-icon>
			<image style="width: 20px;height: 20px" @click="collection" src="@/static/icon/lease/collection.png"
				mode="scaleToFill" shape="circle"></image>
		</view>
		<view class="contentBox">
			<view class="name">XXX{{ language.StationInfo.fwdtitle }}</view>
			<view class="info1">品牌xx<em>|</em>24小时<em>|</em>地下</view>
			<view class="positionBox">
				<view class="top">
					<image style="width: 16px;height: 22px;margin-right: 10px;" src="@/static/icon/lease/address.png"
						mode="scaleToFill" shape="circle"></image>
					<text class="txt">广州市白云区白云大道12333号</text>
					<view class="distance">500m</view>
				</view>
				<view class="bot">
					<text>13523445566</text>
					<u-icon class="iconBox" name="arrow-right" size="18"></u-icon>
					<u-tag class="tagBox" :text="language.StationInfo.btn" type="success" plain @click="LinkMap"></u-tag>
				</view>
			</view>
			<view class="botBox">
				<u-tabs class="tabTitle" :list="tabList" @click="tabChange" :activeStyle="{
				        color: '#2fd4b8',
				        fontWeight: 'bold',
				        transform: 'scale(1.05)'
				    }" lineColor="transparent"></u-tabs>
				<!-- 充电桩 -->
				<view class="tabContent" v-if="currentTab==='cdz'">
					<view class="mibProgress">
						<u-line-progress height="26" :percentage="30" :showText="false">
						</u-line-progress>
						<view class="innerBox">
							<view class="left">
								<em>{{ language.StationInfo.xx }}</em>30
							</view>
							<view class="right">70</view>
						</view>
					</view>
					<view class="contentCon">
						<view class="title">{{ language.StationInfo.jfgz }}</view>
						<view class="priceRulesBox">
							<view class="priceRules">
								<view class="time">9:00-15:00</view>
								<u-cell size="large" isLink>
									<view slot="title"><em>1.25</em>{{ language.StationInfo.rmb }}/{{ language.StationInfo.dd }}</view>
								</u-cell>
							</view>
							<view class="priceRules">
								<view class="time">15:00-23:00</view>
								<u-cell size="large" isLink>
									<view slot="title"><em>1.25</em>{{ language.StationInfo.rmb }}/{{ language.StationInfo.dd }}</view>
								</u-cell>
							</view>
						</view>
					</view>
					<view class="contentCon">
						<view class="title">{{ language.StationInfo.yhhd }}</view>
						<u-cell size="large" isLink>
							<view slot="title">{{ language.StationInfo.kp }}</view>
						</u-cell>
					</view>
					<view class="contentCon">
						<view class="title">{{ language.StationInfo.yytime }}</view>
						<view class="yInfo">{{ language.StationInfo.kftime }}：24{{ language.StationInfo.hh }}</view>
						<view class="yInfo">{{ language.StationInfo.yyf }}：24{{ language.StationInfo.hh }}</view>
						<view class="yInfo">{{ language.StationInfo.dz }}：24{{ language.StationInfo.hh }}</view>
					</view>
				</view>
				<!-- 车辆及电池 -->
				<view class="tabContent" v-else>
					<view class="mibProgress">
						<u-line-progress height="26" :percentage="30" :showText="false">
						</u-line-progress>
						<view class="innerBox">
							<view class="left">
								<em> {{ language.StationInfo.xx }}</em>30
							</view>
							<view class="right">70</view>
						</view>
					</view>
					<view class="rules">
            {{ language.StationInfo.jfgz }}：
						<em>3.00</em>{{ language.StationInfo.tz }}/{{ language.StationInfo.mm }}
					</view>
					<u-radio-group v-model="value" class="packageBox" iconPlacement="right">
						<u-radio activeColor="#2fd4b8" v-for="(item,index) in packageList" :key='index'
							class="packageCon">
							<view solt="label">
								<view class="title">{{item.title}}</view>
								<view class="priceBox">
									<em>{{item.price}}</em>{{item.unit}}
									<view>{{item.info}}</view>
								</view>
							</view>
						</u-radio>
					</u-radio-group>
				</view>

			</view>
		</view>
	</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      language: {},
      tabList: [],
      currentTab: "car",
      packageList: [
        {
          title: "按时",
          price: "20",
          unit: "泰铢/分",
          info: "",
        },
        {
          title: "日租",
          price: "20",
          unit: "泰铢/分",
          info: "套餐描述2",
        },
        {
          title: "周租",
          price: "33",
          unit: "元/天",
          info: "套餐描述3",
        },
        {
          title: "月租",
          price: "33",
          unit: "元/月",
          info: "套餐描述4",
        },
      ],
    };
  },
  onShow: function () {
    this.getlanguagedata();
    console.log("Personalcenter Show");
  },
  onLoad() {
    this.getlanguagedata();
  },
  mounted() {
    this.getlanguagedata();
  },
  methods: {
    getlanguagedata() {
      this.language =
        this.$store.getters["internationalization/getinternationalization"];
      this.tabList = this.language.StationInfo.tabLists;
    },
    //返回列表
    backList() {
      console.log(455);
      uni.navigateBack({
        delta: 1,
        success: () => {
          // 返回成功后的回调函数
        },
        fail: () => {
          // 返回失败后的回调函数
        },
      });
    },
    //收藏
    collection() {},
    //导航
    LinkMap() {},
    //切换tab
    tabChange(e) {
      this.currentTab = e.value;
      console.log(e);
      console.log(1111111111);
    },
  },
};
</script>

<style lang="less" scoped>
.alldiv {
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.1);

  /deep/.u-cell__body {
    padding: 10px 0;
  }

  .navBox {
    display: flex;
    align-items: center;
    height: 120px;
    justify-content: space-between;
    padding: 0 16px;
    background: url("@/static/icon/lease/navBj.png");
    background-size: 100%;
    position: relative;
    z-index: 1;
  }

  .contentBox {
    height: calc(100% - 110px);
    transform: translateY(-10px);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 999;
    background: #fff;
    padding: 16px;

    .name {
      font-weight: bold;
      color: rgba(56, 56, 56, 1);
      line-height: 30px;
      font-size: 16px;
    }

    .info1 {
      padding: 3px 0;
      color: rgba(153, 153, 153, 1);
    }

    .positionBox {
      padding: 5px;
      border-radius: 4px;
      background: rgba(237, 250, 244, 1);
      color: rgba(102, 102, 102, 1);
      margin-bottom: 20px;

      .top {
        display: flex;
        align-items: center;

        .txt {
          flex: 1;
        }

        .distance {
          float: right;
          font-weight: bold;
          color: #333;
          position: relative;
          padding-left: 20px;
        }

        .distance:before {
          display: inline-block;
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          top: 0;
          width: 20px;
          background: url("@/static/icon/lease/position.png") no-repeat center
            center;
        }
      }

      .bot {
        overflow: hidden;
        padding-left: 20px;
        display: flex;
        padding: 5px 0;
        align-items: center;

        .iconBox {
          float: left;
          flex: 1;
        }

        .tagBox {
          float: right;
        }
      }
    }
  }

  .botBox {
    border-radius: 8px;
    background: rgba(237, 250, 244, 1);

    .tabTitle {
      margin-bottom: 15px;
    }

    .mibProgress {
      position: relative;
      margin-bottom: 12px;

      /deep/.u-line-progress__line {
        background: linear-gradient(
          90deg,
          rgba(47, 212, 184, 0.2) 0%,
          rgba(47, 212, 184, 1) 100%
        ) !important;
      }

      .innerBox {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;

        .left {
          margin-right: 30px;
          display: flex;
          color: #666;
          align-items: center;
          line-height: 20px;

          em {
            font-style: unset;
            display: block;
            border-radius: 50%;
            background: #fff;
            margin-right: 5px;
            padding: 1px;
            box-sizing: border-box;
            width: 20px;
            height: 20px;
            text-align: center;
          }
        }

        .right {
          color: #666;
          margin-left: 30px;
          line-height: 24px;
        }
      }
    }

    .tabContent {
      padding: 0 10px;
      background: #fff;

      .rules {
        padding: 5px 0;

        em {
          font-style: unset;
          font-weight: bold;
        }
      }

      // 充电桩样式
      .contentCon {
        border-bottom: 1px solid #ccc;
        margin-bottom: 15px;

        .title {
          font-weight: bold;
          font-size: 16px;
          line-height: 30px;
        }

        .yInfo {
          margin-bottom: 5px;
          position: relative;
          padding-left: 10px;
        }

        .yInfo:before {
          display: block;
          content: "";
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background: #ccc;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        .priceRulesBox {
          display: flex;
          justify-content: space-between;

          em {
            font-style: unset;
            font-weight: bold;
            color: rgba(255, 51, 51, 1);
            font-size: 16px;
          }

          .priceRules {
            width: 50%;
            flex: 1;

            .time {
              position: relative;
              padding-left: 25px;
              line-height: 20px;
            }

            .time:before {
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              width: 20px;
              height: 20px;
              display: block;
              content: "";
              background: url(@/static/icon/lease/time.png);
              background-size: 100% 100%;
            }
          }
        }
      }
    }

    .packageBox {
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .packageCon {
        padding: 0 10px;
        position: relative;
        border-bottom: 1px solid #ccc;
        margin: 8px 0;

        em {
          font-style: unset;
          font-weight: bold;
          color: rgba(255, 51, 51, 1);
        }

        .priceBox {
          padding-left: 20px;
        }
      }

      .packageCon:before {
        position: absolute;
        left: 0;
        display: block;
        content: "";
        width: 3px;
        height: 100%;
        background: #ccc;
        border-radius: 3px;
      }
    }
  }
}
</style>